<template>
  <div class="yun-view">
    <div class="yun-filter">
      <el-form size="large" :inline="true">
        <el-form-item label="表格名称">
          <el-input v-model="xlsname" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button type="primary" @click="addEvent">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="yun-table">
      <el-table :data="Ydata.list" empty-text="暂无数据"   stripe height="600" >
        <el-table-column type="index" label="序号" width="60px"></el-table-column>
        <el-table-column prop="name" label="文档名称" align="center"></el-table-column>
        <el-table-column prop="user__name" label="创建人" align="center"></el-table-column>
        <el-table-column prop="create_time" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="create_time" label="更新时间" align="center"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="editEvent(scope.row)">编辑</el-button>
            <el-button type="text" @click="editEvent(scope.row)">下载</el-button>
            <el-button type="text" @click="deleteEvent(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="Ydata.page" background layout="prev, pager, next" :total="Ydata.total"  @current-change="handleCurrentChange" />
    </div>
    <el-dialog title="新增/编辑" v-model="dialogVisible" width="400">
      <el-form :model="Ydata.itemInfo" label-width="100">
        <el-form-item label="文档名称">
          <el-input type="text" v-model="Ydata.itemInfo.name" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveitemInfo">保存</el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  
</template>
<script setup>
import {ref,reactive, onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {xlsList,xlsAddOrUpload,xlsDelete} from '@/api/onlineOffice.js'
const router = useRouter()
const xlsname = ref('')
const Ydata = reactive({
  list:[],
  total:100,
  page:1,
  pageSize:10,
  itemInfo:{
    name:"",
    id:null,
  }
})
let dialogVisible = ref(false)

onMounted(()=>{
  getList()
})
const getList = async()=>{
  let res = await xlsList({name:xlsname.value})
  if(res.code==200){
    Ydata.list = res.data.list
    Ydata.total =  res.data.total
  }
}
//分页
const handleCurrentChange = (val)=>{
  Ydata.page = val
  getList()
}
const addEvent = ()=>{
  Ydata.itemInfo = {
    name:"",
    id:null
  }
  dialogVisible.value = true
}
const editEvent = (row)=>{
  Ydata.itemInfo = row
  dialogVisible.value = true
}
const saveitemInfo = async ()=>{
  
  let res = await xlsAddOrUpload(Ydata.itemInfo)
  if(res.code==200){
    ElMessage.success("保存成功")
    dialogVisible.value = false
    router.push({path:"/onlineOffice/xls",query:{
      fileName:Ydata.itemInfo.name,
      id:res.data.id
    }})
  }
}
const deleteEvent = (row)=>{
  ElMessageBox.confirm(
    '确定删除此条数据吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    let res = await xlsDelete({id:row.id})
    if(res.code==200){
      ElMessage.success("删除成功")
      getList()
    }
  })

}
</script>
<style lang="scss" scoped>
  .yun-view{
    .yun-filter{
      padding:15px 15px 0;
      background: #fff;
      border-radius: 8px;
      margin-bottom:10px;
    }
    .yun-table{
      padding: 15px;
      background: #fff;
      border-radius: 8px;
    }
  }
</style>